<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix" style="margin:10px 0">
      <!-- 头部左侧内容 -->
      <el-tabs class="tab" v-model="activeName">
        <el-tab-pane label="销售额" name="scale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
      </el-tabs>
      <!-- 头部右侧内容 -->
      <div class="right">
        <span @click="setDay">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear"> 本年</span>
        <el-date-picker class="date" size="mini" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']" v-model="date" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
    </div>
    <div>
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="charts" ref="charts"></div>
        </el-col>
        <el-col :span="6" class="right">
          <h3>门店{{title}}排名</h3>
          <ul>
            <li v-for="(item,index) in list.orderRank" :key="item.no">
              <span class="rindex">{{item.no}}</span>
              <span class="rcenter">{{item.name}}</span>
              <span class="rvalue">{{item.money}}</span>
            </li>

          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>

</template>

<script>
import echarts from 'echarts'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      activeName: 'scale',
      // 日历数据
      date: []
    }
  },
  mounted() {
    this.mycharts = echarts.init(this.$refs.charts)
    this.mycharts.setOption({
      title: {
        text: '销售额'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      gird: {
        left: '3%',
        right: '%4',
        bottom: '3%',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'bar',
          barWidth: '60%',
          color: 'gold'
        }
      ]
    })
  },
  computed: {
    title() {
      return this.activeName === 'scale' ? '销售额' : '访问量'
    },
    ...mapState('home', ['list'])
  },
  // 监听title变化赋值给echarts
  watch: {
    title() {
      this.mycharts.setOption({
        title: {
          text: this.title
        },
        xAxis: {
          data: this.title == '销售额' ? this.list.orderFullYearAxis : this.list.userFullYearAxis
        },
        series: [
          {
            data: this.title == '销售额' ? this.list.orderFullYear : this.list.userFullYear,
            color: this.title == '销售额' ? 'gold' : '#33CC66'
          }
        ]
      })
    },
    // 监听仓库home/list是否有数据 一上来要默认显示数据
    list() {
      this.mycharts.setOption({
        xAxis: {
          data: this.list.orderFullYearAxis
        },
        series: {
          data: this.list.orderFullYear
        }
      })
    }
  },
  methods: {
    // 获取当日时间
    setDay() {
      const day = dayjs().format('YYYY-MM-DD')
      // console.log(day)
      this.date = [day, day]
    },
    // 获取本周时间
    setWeek() {
      // 本周起始时间
      const start = dayjs().day(1).format('YYYY-MM-DD')
      // 本周结束时间
      const end = dayjs().day(7).format('YYYY-MM-DD')
      // console.log(start, end)
      this.date = [start, end]
    },
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      this.date = [start, end]
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tab {
  width: 100%;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  span {
    margin: 0 10px;
  }
}
.date {
  widows: 200px;
  margin: 0 20px;
}
.charts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
  padding: 0;
  width: 100%;
  height: 300px;
  li {
    height: 8%;
    margin: 8px 0;
    .rindex {
      float: left;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: black;
      color: white;
      text-align: center;

      line-height: 22px;
    }

    .rvalue {
      float: right;
    }
  }
}
</style>